<template>
  <div class="main-content-empty"
       @click="addItem()">
    <div class="main-content-empty-txt">暂 时 没 有 {{ msg }}</div>
    <template v-if="route !== 1">
      <span
          class="main-content-empty-btn el-icon-circle-plus-outline"
      ></span>
    </template>
  </div>
</template>

<script>
export default {
  props: ["route"],
  computed: {
    msg() {
      if (this.route === 0) return "商 铺";
      if (this.route === 1) return "订 单";
      return "商 品";
    },
  },
  methods: {
    addItem() {
      this.$store.state.contentBars.unshift({
        id: this.$store.state.contentBars.length,
        name: "329",
        info: [0, 0],
      });
    },
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/global.scss";

.main-content-empty {
  width: 800px;
  height: 225px;
  margin: 5% 0 3% 0;
  padding-left: 25px;
  position: relative;
  cursor: pointer;

  .main-content-empty-txt {
    font-size: xx-large;
    color: $theme;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 225px;
  }

  .main-content-empty-btn {
    position: absolute;
    top: calc(50% - 75px);
    left: calc(50% - 75px);
    font-size: 150px;
    color: $theme;
    opacity: 0.35;
  }
}
</style>